<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ottergram</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
  <link rel="stylesheet" href="/css/styles.css">
</head>

<body>
  <header class="main-header">
    <h1 class="logo-text">ottergram</h1>
  </header>
  <main class="main-content">
    <ul class="thumbnail-list">
      <li class="thumbnail-item">
        <a href="img/otter1.jpg" data-image-role="trigger" data-image-title="Stayin' Alive" data-image-url="img/otter1.jpg">
          <img class="thumbnail-image" src="img/otter1.jpg" alt="Barry the Otter">
          <span class="thumbnail-title">Barry</span>
        </a>
      </li>
      <li class="thumbnail-item">
        <a href="img/otter2.jpg" data-image-role="trigger" data-image-title="How Deep Is Your Love" data-image-url="img/otter2.jpg">
          <img class="thumbnail-image" src="img/otter2.jpg" alt="Robin the Otter">
          <span class="thumbnail-title">Robin</span>
        </a>
      </li>
      <li class="thumbnail-item">
        <a href="img/otter3.jpg" data-image-role="trigger" data-image-title="You Should Be Dancing" data-image-url="img/otter3.jpg">
          <img class="thumbnail-image" src="img/otter3.jpg" alt="Maurice the Otter">
          <span class="thumbnail-title">Maurice</span>
        </a>
      </li>
      <li class="thumbnail-item">
        <a href="img/otter4.jpg" data-image-role="trigger" data-image-title="Night Fever" data-image-url="img/otter4.jpg">
          <img class="thumbnail-image" src="img/otter4.jpg" alt="Lesley the Otter">
          <span class="thumbnail-title">Lesley</span>
        </a>
      </li>
      <li class="thumbnail-item">
        <a href="img/otter5.jpg" data-image-role="trigger" data-image-title="To Love Somebody" data-image-url="img/otter5.jpg">
          <img class="thumbnail-image" src="img/otter5.jpg" alt="Barbara the Otter">
          <span class="thumbnail-title">Barbara</span>
        </a>
      </li>
    </ul>

    <div class="detail-image-container">
      <div class="detail-image-frame">
        <img class="detail-image" data-image-role="target" src="img/otter1.jpg" alt="">
        <span class="detail-image-title" data-image-role="title">Stayin' Alive</span>
      </div>
    </div>
  </main>
  <script src="scripts/main.js" charset="utf-8"></script>
</body>

</html>